<!-- 该画面是项目计划书主表画面 -->
<template>
  <div class="app-container">
    <div class="query-container">
      <search-bar :show-search="showSearch" show-more @toggle="searchMore = $event">
        <el-form ref="queryForm" :model="queryParams" :label-width="labelWidth" :inline="true">
          <el-form-item :label="$t('serialNumber')" prop="serialNumberFK">
            <el-select v-model="queryParams.serialNumberFK" size="small" clearable filterable :placeholder="$t('inputserialNumber')" style="width: 220px;">
              <el-option v-for="item in serialNumberOption" :key="item.id" :label="item.serial_number" :value="item.id">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right;font-size: 13px;color: var(--el-text-color-secondary);">{{ item.serial_name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('department')" prop="departmentFK">
            <el-select v-model="queryParams.departmentFK" size="small" clearable filterable :placeholder="$t('inputdepartment')" style="width: 220px;">
              <el-option v-for="item in departmentOption" :key="item.code" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.code }}</span>
                <span style="float: right;font-size: 13px;color: var(--el-text-color-secondary);">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('projectPlanStatus')" prop="project_status">
            <el-select v-model="queryParams.project_status" size="small" clearable :placeholder="$t('projectPlanStatus')" style="width: 220px;">
              <el-option v-for="status in projectPlanStatus" :key="status.value" :label="status.label" :value="status.value">
                <span style="float: left">{{ status.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ status.value }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="searchMore" :label="$t('projectPlanName')" prop="project_name">
            <el-input v-model="queryParams.project_name" size="small" :placeholder="$t('inputprojectPlanName')" style="width: 220px;" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item v-show="searchMore" :label="$t('startDate')" prop="start_date">
            <el-date-picker v-model="queryParams.start_date" size="small" type="date" value-format="yyyy-MM-dd" style="width: 220px;" clearable :placeholder="$t('startDate')" />
          </el-form-item>
          <el-form-item v-show="searchMore" :label="$t('endDate')" prop="end_date">
            <el-date-picker v-model="queryParams.end_date" size="small" type="date" value-format="yyyy-MM-dd" style="width: 220px;" clearable :placeholder="$t('endDate')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </search-bar>
    </div>
    <div class="tool-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{ $t('addBtn') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table-pro v-loading="loading" :highlight-current-row="true" :data="projectPlanBaseList" :columns-config="columnsConfig" @sort="sortChange">
      <el-table-column :label="$t('operate')" align="center" width="220" fixed="right" class-name="fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">{{ $t('detailBtn') }}</el-button>
          <el-button v-auth="[]" :disabled="scope.row.project_status !== 'O'" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('modifyBtn') }}</el-button>
          <el-dropdown v-more size="mini" trigger="click" @command="command => handleCommand(command, scope.row)">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{ $t('moreBtn') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleDelete" icon="el-icon-delete">{{ $t('deleteBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleAddProjectInfo" icon="el-icon-plus">{{ $t('projectInfoAddbtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleAddProjectCustom" icon="el-icon-plus">{{ $t('projectCustomAddbtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleAddProjectOther" icon="el-icon-plus">{{ $t('projectOtherAddbtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'O'" command="handleRelease" icon="el-icon-unlock">{{ $t('releaseBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R'" command="handleAddProjectQuota" icon="el-icon-plus">{{ $t('projectQuotaAddbtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R'" command="handleAddMaintainProject" icon="el-icon-plus">{{ $t('maintainProjectAddBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R'" command="handleAddDevelopProject" icon="el-icon-plus">{{ $t('developProjectAddBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R'" command="handleCombineAccountInquire" icon="el-icon-view">{{ $t('projectCombineAccountInquire') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R'" command="handleCombineStageInquire" icon="el-icon-view">{{ $t('projectCombineStageInquire') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" :disabled="scope.row.project_status !== 'R' || scope.row.status === 'C'" command="handleClose" icon="el-icon-close">{{ $t('closeBtn') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table-pro>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <!-- 项目计划书新增、更新 -->
    <projectplanbase-sheet ref="ProjectPlanBaseSheet" @refreshList="getList" />
    <!-- 项目计划书明细信息 -->
    <projectplanbase-inquire ref="ProjectPlanBaseInquire" />
    <!-- 项目计划书基础信息 -->
    <projectplaninfo-sheet ref="ProjectPlanInfoSheet" @refreshList="getList" />
    <projectplaninfo-maintain ref="ProjectPlanInfoMaintain" @refreshList="getList" />
    <!-- 客户信息维护 -->
    <projectplancustomer-maintain ref="ProjectPlanCustomerMaintain" @refreshList="getList" />
    <!-- 法律信息维护 -->
    <projectplanlaw-maintain ref="ProjectPlanLawMaintain" @refreshList="getList" />
    <!-- 其他信息维护 -->
    <projectauxiliary-maintain ref="ProjectAuxiliaryMaintain" @refreshList="getList" />
    <!-- 报价单信息维护 -->
    <projectquota-maintain ref="ProjectQuotaMaintain" @refreshList="getList" />
    <!-- 维护项目维护 -->
    <projectmaintain-maintain ref="ProjectMaintainMaintain" @refreshList="getList" />
    <!-- 开发项目维护 -->
    <projectdevelop-maintain ref="ProjectDevelopMaintain" @refreshList="getList" />
    <!-- 项目核算履历明细 -->
    <projectcombineaccount-maintain ref="ProjectCombineAccountMaintain" @refreshList="getList" />
    <!-- 阶段别预实管理明细 -->
    <projectcombinestage-maintain ref="ProjectCombineStageMaintain" @refreshList="getList" />
  </div>
</template>

<script>
import { deleteProjectPlanBaseApi, releaseProjectPlanBaseApi, closeProjectPlanBaseApi } from '../api/projectplanbase.api'
import { getSerialNumByUserListApi } from '@/views/master/serialnumber/api/serialnumber.api'
import { getDepartmentsByUserListApi } from '@/views/master/departments/api/departments.api'
import { getCodeTableDetailApi } from '@/api/common/common'
import ElTablePro from '@/components/ElTablePro'
import listMixin from '@/mixins/ListMixin'
import { mapGetters } from 'vuex';
import ProjectplanbaseSheet from './projectplanbase-sheet.vue';
import ProjectplanbaseInquire from './projectplanbase-inquire.vue';
import ProjectplaninfoSheet from '../../projectplaninfo/components/projectplaninfo-sheet.vue'
import ProjectplancustomerMaintain from '../../projectplancustomer/components/projectplancustomer-maintain.vue'
import ProjectplanlawMaintain from '../../projectplanlaw/components/projectplanlaw-maintain.vue'
import ProjectquotaMaintain from '@/views/project/projectquota/components/projectquota-maintain.vue'
import ProjectmaintainMaintain from '@/views/project/projectmaintain/components/projectmaintain-maintain.vue'
import ProjectdevelopMaintain from '../../../project/projectdevelop/components/projectdevelop-maintain.vue'
import ProjectplaninfoMaintain from '../../projectplaninfo/components/projectplaninfo-maintain.vue'
import ProjectauxiliaryMaintain from '../../projectauxiliary/components/projectauxiliary-maintain.vue'
import projectcombineaccountMaintain from '../../../project/projectaccount/components/projectcombineaccount-maintain.vue'
import projectcombinestageMaintain from '../../../project/projectstage/components/projectcombinestage-maintain.vue'

export default {
  name: 'ProjectPlanBaseList',
  components: {
    ElTablePro,
    ProjectplanbaseSheet,
    ProjectplanbaseInquire,
    ProjectplaninfoSheet,
    ProjectplancustomerMaintain,
    ProjectplanlawMaintain,
    ProjectquotaMaintain,
    ProjectmaintainMaintain,
    ProjectdevelopMaintain,
    ProjectplaninfoMaintain,
    ProjectauxiliaryMaintain,
    projectcombineaccountMaintain,
    projectcombinestageMaintain
  },
  mixins: [listMixin],
  data() {
    return {
      searchMore: false,
      queryParams: {
        'serialNumberFK': undefined,
        'departmentFK': undefined,
        'project_name': undefined,
        'start_date': undefined,
        'end_date': undefined,
        'project_status': undefined
      },
      serialNumberOption: [],
      departmentOption: [],
      projectPlanStatus: [],
      actionFuncName: 'projectbase/getProjectPlanBaseList',
      actionApi: {
        'delete': deleteProjectPlanBaseApi
      }
    }
  },
  computed: {
    ...mapGetters(['projectPlanBaseList', 'name']),
    columnsConfig() {
      return [
        { prop: 'serial_number', label: this.$t('serialNumber'), 'width': 120 },
        { prop: 'project_status_desc', label: this.$t('projectPlanStatus'), 'width': 80 },
        { prop: 'department_name', label: this.$t('department'), 'width': 120 },
        { prop: 'project_name', label: this.$t('projectPlanName'), 'min-width': 370 },
        { prop: 'start_date', label: this.$t('startDate'), align: 'center', 'width': 100 },
        { prop: 'end_date', label: this.$t('endDate'), align: 'center', 'width': 100 },
        { prop: 'standard_curr', label: this.$t('standardCurrency'), 'width': 100 },
        { prop: 'created', label: this.$t('createdUser'), 'width': 100 },
        { prop: 'created_date', label: this.$t('createdDate'), 'width': 160 },
        { prop: 'created_program', label: this.$t('createdProgram'), 'width': 200, 'show-overflow-tooltip': true },
        { prop: 'updated', label: this.$t('updatedUser'), 'width': 100 },
        { prop: 'updated_date', label: this.$t('updatedDate'), 'width': 160 },
        { prop: 'updated_program', label: this.$t('updatedProgram'), 'width': 200, 'show-overflow-tooltip': true }
      ]
    },
    labelWidth() {
      // 根据国际化设置确定标签宽度,如果语言环境是英语，则返回150px
      return this.$i18n.locale === 'en' ? '150px' : '80px';
    }
  },
  created() {
    this.getSerialNumInfo();
    this.getDepartmentInfo();
  },
  mounted() {
    // 获取Codetable下拉框数据
    getCodeTableDetailApi('Project', 'project_status').then(resp => {
      this.projectPlanStatus = resp.data;
    });
  },
  methods: {
    // 获取制番List，支持按照制番号和制番名称检索
    async getSerialNumInfo(query) {
      var resp = await getSerialNumByUserListApi({ search: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.serialNumberOption = resp.data.results;
      } else {
        this.serialNumberOption = [];
      }
    },
    // 获取部门List，支持按照部门名称检索
    async getDepartmentInfo(query) {
      var resp = await getDepartmentsByUserListApi({ search: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.departmentOption = resp.data.results;
      } else {
        this.departmentOption = [];
      }
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleRelease':
          this.handleRelease(row);
          break;
        case 'handleAddProjectInfo':
          this.handleAddProjectInfo(row);
          break;
        case 'handleAddProjectLaw':
          this.handleAddProjectLaw(row)
          break;
        case 'handleAddProjectOther':
          this.handleAddProjectOther(row)
          break;
        case 'handleAddProjectCustom':
          this.handleAddProjectCustom(row)
          break;
        case 'handleClose':
          this.handleClose(row)
          break;
        case 'handleAddProjectQuota':
          this.handleAddProjectQuota(row)
          break;
        case 'handleAddMaintainProject':
          this.handleAddMaintainProject(row)
          break;
        case 'handleAddDevelopProject':
          this.handleAddDevelopProject(row)
          break;
        case 'handleCombineAccountInquire':
          this.handleCombineAccountInquire(row)
          break;
        case 'handleCombineStageInquire':
          this.handleCombineStageInquire(row)
          break;
        default:
          break;
      }
    },
    /** 点击明细按钮 */
    handleDetail(row) {
      this.$refs.ProjectPlanBaseInquire.openSheetDialog(row);
    },
    // 新增按钮
    handleAdd() {
      this.$refs.ProjectPlanBaseSheet.openSheetDialog()
    },
    // 修改按钮
    handleUpdate(row) {
      this.$refs.ProjectPlanBaseSheet.openSheetDialog({ ...row })
    },
    // 删除按钮
    handleDelete(row) {
      const confirmMessage = this.$t('dataDeleteConfirm', { title: this.$t('serialNumber'), value: row.serialNumberFK })
      const successMessage = this.$t('deleteSuccess', { title: this.$t('serialNumber'), value: row.serialNumberFK })
      this.handleAction('delete', row.id, confirmMessage, successMessage)
    },
    // 生效按钮
    handleRelease(row) {
      this.$confirm(
        this.$t('dataReleaseConfirm', {
          title: this.$t('serialNumber'),
          value: row.serialNumberFK
        }),
        this.$t('warning'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'), cancelButtonClass: 'btn-cancel-to-right',
          type: 'warning'
        }
      ).then(async() => {
        var resp = await releaseProjectPlanBaseApi(row.id);
        if (resp.success) {
          this.targaMessage(
            this.$t('releaseSuccess', {
              title: this.$t('serialNumber'),
              value: row.serialNumberFK
            })
          );
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      });
    },
    // 项目计划基础信息新增
    handleAddProjectInfo(row) {
      // this.$refs.ProjectPlanInfoSheet.openSheetDialog({ ...row })
      this.$refs.ProjectPlanInfoMaintain.openSheetDialog({ ...row })
    },
    // 项目计划法律信息新增
    handleAddProjectLaw(row) {
      this.$refs.ProjectPlanLawMaintain.openSheetDialog({ ...row })
    },
    // 项目计划其他信息新增
    handleAddProjectOther(row) {
      this.$refs.ProjectAuxiliaryMaintain.openSheetDialog({ ...row })
    },
    // 项目计划客户信息新增
    handleAddProjectCustom(row) {
      this.$refs.ProjectPlanCustomerMaintain.openSheetDialog({ ...row })
    },
    // 项目计划报价信息新增
    handleAddProjectQuota(row) {
      this.$refs.ProjectQuotaMaintain.openSheetDialog({ ...row })
    },
    // 维护项目信息新增
    handleAddMaintainProject(row) {
      this.$refs.ProjectMaintainMaintain.openSheetDialog({ ...row })
    },
    // 开发项目新增
    handleAddDevelopProject(row) {
      this.$refs.ProjectDevelopMaintain.openSheetDialog({ ...row })
    },
    // 项目核算履历明细
    handleCombineAccountInquire(row) {
      this.$refs.ProjectCombineAccountMaintain.openSheetDialog({ ...row })
    },
    // 阶段别预实管理明细
    handleCombineStageInquire(row) {
      this.$refs.ProjectCombineStageMaintain.openSheetDialog({ ...row })
    },
    // 关闭按钮
    handleClose(row) {
      this.$confirm(
        this.$t('dataCloseConfirm', {
          title: this.$t('serialNumber'),
          value: row.serialNumberFK
        }),
        this.$t('warning'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'), cancelButtonClass: 'btn-cancel-to-right',
          type: 'warning'
        }
      ).then(async() => {
        var resp = await closeProjectPlanBaseApi(row.id);
        if (resp.success) {
          this.targaMessage(
            this.$t('closeSuccess', {
              title: this.$t('serialNumber'),
              value: row.serialNumberFK
            })
          );
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      });
    }
  }
}
</script>

<style scoped>
 /* 通用输入框样式
 ::v-deep .el-input input,
::v-deep .el-select .el-input__inner,
::v-deep .el-date-editor .el-input__inner {
  width: 180px;
  box-sizing: border-box;
}
::v-deep .el-form-item__label {
    text-align: right;
} */
.el-input input, .el-select .el-input__inner {
  width: 160px;
  box-sizing: border-box;
  text-align: right;
}
/* 设置所有的el-form-item__label标签的文本对齐方式为右对齐 */
::v-deep .el-form-item__label {
    text-align: right;
  }
</style>
